<template>
    <ContentWrap style="border-radius: 16px;">
        <el-form ref="queryFormRef" :inline="true" class="-mb-15px" label-width="68px"
            style="display: flex; justify-content: space-between; margin-bottom: 10px;">
            <div>
                <el-form-item label="商品名称" prop="name">
                    <el-input class="!w-240px" clearable placeholder="请输入" />
                </el-form-item>
                <el-form-item label="入住时间">
                    <el-date-picker v-model="formInline.date" type="date" placeholder="请选择" clearable />
                </el-form-item>
            </div>
            <div class="pro-cen">
                <div class="pro-cenmain">
                    <div class="nb">
                        月配送历史
                    </div>
                    <div class="nb-right">
                        周配送历史
                    </div>
                </div>
            </div>
            <el-form-item>
                <el-button type="primary" plain v-hasPermi="['cms:art-category:export']">
                    导出报告
                </el-button>
                <el-button plain type="primary" @click="dialogFormVisible = true">
                    <Icon class="mr-5px" icon="ep:plus" />
                    新增
                </el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableDataFrom" stripe style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="concrete" label="商砼企业" align="center" />
            <el-table-column prop="quantity" label="配送数量/总量" align="center" />
            <el-table-column prop="project" label="项目" align="center" />
            <el-table-column prop="address" label="地址" align="center" />
            <el-table-column prop="situation" label="付款情况" align="center" />
            <el-table-column prop="order" label="订单号" align="center" />
            <el-table-column prop="procureTime" label="采购时间" align="center" />

            <!-- 分页器 -->
            <div style="display: flex; justify-content: center;">
                <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :disabled="disabled" background
                    layout=" prev, pager, next" :total="1000" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </el-table>

        <el-button @click="btn">跳转到日期</el-button>
    </ContentWrap>

    <!-- 添加采购弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="添加采购计划" style="width: 500px; border-radius: 18px;">
        <div class="main-p" style="font-size: 17px; font-weight: 600;margin-bottom: 10px;">基本信息</div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon style=" background-color: #f9fbff; padding: 5px 0px;  border-radius: 15px;">
            <el-form-item label="商砼企业" prop="qy" style="width: 420px; margin-top: 18px;">
                <el-select v-model="ruleForm.name" placeholder="请选择项目" style="width: 420px;">
                    <el-option v-for="(v, i) in hange" :label="v.title" :value="v.title" :key="i" />
                </el-select>
            </el-form-item>
            <el-form-item label="项目" prop="name" style="width: 420px; margin-top: 18px;">
                <el-select v-model="ruleForm.name" placeholder="请选择项目" style="width: 420px;">
                    <el-option v-for="(v, i) in hange" :label="v.title" :value="v.title" :key="i" />
                </el-select>
            </el-form-item>
            <el-form-item label="商品" prop="speci" style="width: 420px;">
                <el-select v-model="ruleForm.speci" placeholder="请选择商品" style="width: 420px;">
                    <el-option v-for="(v, i) in hange" :label="v.title" :value="v.title" :key="i" />
                </el-select>
            </el-form-item>
            <el-form-item label="数量" prop="number" type="number" style="width: 420px;">
                <el-input v-model="ruleForm.number" placeholder="请输入集采数量" />
            </el-form-item>

            <el-form-item label="采购时间" prop="timer" style="width: 420px;">
                <el-time-picker v-model="value1" :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes"
                    :disabled-seconds="disabledSeconds" placeholder="Arbitrary time" />
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';

import { useRouter } from "vue-router";


const tableDataFrom = [{}]

const currentPage = ref(5)
const pageSize = ref(100)
const disabled = ref(false)


const hange = reactive([
    { title: '沙石' },
    { title: '石油' }
])
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
const formInline = reactive({
    user: '',
    region: '',
    date: '',
})

const dialogFormVisible = ref(false)
interface RuleForm {
    speci: string,
    name: string,
    number: string,
    timer: string,
    notes: any
}

const formSize = ref('default')
const ruleFormRef = ref()
const ruleForm = reactive<RuleForm>({
    speci: '',
    name: '',
    number: '',
    timer: "",
    notes: ""
})


const rules = reactive({
    name: [
        { required: true, message: '请输入商品名称', trigger: 'blur' }
    ],
    speci: [
        { required: true, message: '请输入商品规格', trigger: 'blur' }
    ],
    number: [
        { required: true, message: '请输入数量', trigger: 'blur' }
    ],
    timer: [
        { required: true, message: '请输入集采时间', trigger: 'blur' }
    ]
})



// 测试路由跳转
const router = useRouter()
const btn = () => {
    router.push('/supply/procure/date')
}

// 时间选择

const value1 = ref(new Date(2016, 9, 10, 18, 30))

const makeRange = (start: number, end: number) => {
    const result: number[] = []
    for (let i = start; i <= end; i++) {
        result.push(i)
    }
    return result
}
const disabledHours = () => {
    return makeRange(0, 16).concat(makeRange(19, 23))
}
const disabledMinutes = (hour: number) => {
    if (hour === 17) {
        return makeRange(0, 29)
    }
    if (hour === 18) {
        return makeRange(31, 59)
    }
}
const disabledSeconds = (hour: number, minute: number) => {
    if (hour === 18 && minute === 30) {
        return makeRange(1, 59)
    }
}


</script>

<style scoped lang="scss">
.pro-cenmain {
    display: flex;
    border-radius: 8px;
    background: rgba(81, 123, 255, 1);
    border: 1px solid rgba(81, 123, 255, 1);
    font-size: 14px;

    .nb {
        background-color: #fff;
        font-size: 12px;
        line-height: 20px;
        border-radius: 7px 9px 9px 7px;
        padding: 0px 6px;
    }

    .nb-right {
        font-size: 12px;
        line-height: 21px;
        padding: 0px 6px;
        color: #fff;

    }
}

::v-deep(.el-input__prefix) {
    display: none;
}

::v-deep.el-pagination.is-background .btn-prev,
::v-deep.el-pagination>.is-last {
    border-radius: 10px;
}

::v-deep.el-table--default {
    margin-bottom: 10px;
}

::v-deep.el-pagination.is-background .el-pager li,
.el-pagination.is-background .btn-prev {
    border-radius: 12px;
}

::v-deep.el-form-item--default .el-form-item__label {
    align-items: flex-start;
}
</style>